<template>
    <span v-if="readonly">{{viewValue}}</span>
    <input v-else-if="disabled" v-model="viewValue" disabled/>
</template>

<script>
  export default {
    props: ['value', 'disabled', 'readonly', 'type'],
    data: function() {
      return {
        viewValue: "",
      };
    },
    created: function() {},
    mounted: function() {
      this.valueChange(this.value)
    },
    methods: {
      /* 脱敏相关字段 type的定义
      证件号idCard 手机号phone 座机tel 本人姓名nameself 其他人姓名nameother 公司company 银行账号bankCard 地址address 邮箱email */
      valueChange(str) {
        let newStr = ''
        if (str === 0 || str) {
          str += ''
          if (this.type == 'idCard') { //身份证类型  隐藏证件号中间的月日
            newStr += str.substr(0, 6)
            for (let i = 6; i < str.length; i++) {
              newStr += '*'
            }
          } else if (this.type == 'phone') { //电话类型 手机号  隐藏倒数5至8位
            newStr += str.substring(0, str.length - 8)
            newStr += '****'
            newStr += str.substr(str.length - 4)
          } else if (this.type == 'tel') { //电话类型 座机  隐藏除区号和电话号码后面2位
            if (str.startsWith('01') || str.startsWith('02')) {
              newStr += str.substr(0, 3)
              for (let i = 3; i < str.length - 2; i++) {
                newStr += '*'
              }
              newStr += str.substr(str.length - 2)
            } else {
              newStr += str.substr(0, 4)
              for (let i = 4; i < str.length - 2; i++) {
                newStr += '*'
              }
              newStr += str.substr(str.length - 2)
            }
          } else if (this.type == 'nameself') { //本人姓名
            if (str.length <= 3) { //小于三位 隐藏名
              newStr += str.substring(0, 1)
              newStr += '**'
            } else { //大于三位 显示前2位 其余隐藏
              newStr += str.substring(0, 2)
              for (let i = 2; i < str.length; i++) {
                newStr += '*'
              }
            }
          } else if (this.type == 'nameother') { //其他人姓名
            if (str.length <= 3) { //小于三位
              newStr += '*'
              newStr += str.substr(1)
            } else { //大于三位
              newStr += '**'
              newStr += str.substr(2)
            }
          } else if (this.type == 'company') { //公司
            let count = Math.floor(str.length / 2)
            for (let i = 0; i < count; i++) {
              newStr += '*'
            }
            newStr += str.substr(count)
          } else if (this.type == 'bankCard') { //银行账号
            newStr += str.substr(0, 6)
            for (let i = 6; i < str.length - 4; i++) {
              newStr += '*'
            }
            newStr += str.substr(str.length - 4)
          } else if (this.type == 'address') { //地址
            newStr = str.replace(/\d|[a-zA-z]/ig, '*')
          } else if (this.type == 'email') { //电子邮箱
            let before = str.split('@')[0]
            let end = str.split('@')[1]
            if (before <= 3) {
              newStr = str
            } else {
              newStr += str.substr(0, 3)
              newStr += '***@'
              newStr += end
            }
          } else {
            newStr = str
          }
        }
        this.viewValue = newStr
      }
    },
    watch: {
      //数据更新时 更新格式化
      value: function(newVal, oldVal) {
        this.valueChange(newVal)
      },
    },
  };
</script>
